<template>
  <el-drawer
    v-model="drawerVisible"
    :destroy-on-close="true"
    size="450px"
    :title="`${drawerProps.title}${t('jggl.khgl.customer')}`"
  >
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item :label="t('jggl.khgl.technician')" prop="technicianNameFullName">
        <el-dialog :title="t('jggl.jgsz.selectUser')" v-model="dialogTableVisible">
          <div :style="{ height: '500px' }">
            <moreSelectUser @send-data="sendData" />
          </div>
        </el-dialog>

        <el-input
          v-model="drawerProps.row!.technicianNameFullName"
          :placeholder="t('jggl.jgsz.selectUser')"
          clearable
          @click="dialogTableVisible = true"
        ></el-input>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.name')" prop="orgName">
        <el-input v-model="drawerProps.row!.orgName" :placeholder="t('jggl.khgl.pleaseEnterCustomerName')" clearable></el-input>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.type')" prop="typeNo">
        <el-select v-model="drawerProps.row!.typeName">
          <el-option :label="t('jggl.khgl.paidUser')" value="付费用户" />
          <el-option :label="t('jggl.khgl.freeUser')" value="免费用户" />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.phone')" prop="officePhone">
        <el-input v-model="drawerProps.row!.officePhone" :placeholder="t('jggl.khgl.pleaseEnterPhone')" clearable></el-input>
      </el-form-item>
      <el-form-item label="传真" prop="officeFax">
        <el-input v-model="drawerProps.row!.officeFax" :placeholder="t('jggl.khgl.pleaseEnterFax')" clearable></el-input>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.legalRepresentative')" prop="corporate">
        <el-input
          v-model="drawerProps.row!.corporate"
          :placeholder="t('jggl.khgl.pleaseEnterLegalRepresentative')"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.companySize')" prop="regCapital">
        <el-select v-model="drawerProps.row!.companySize">
          <el-option :label="t('jggl.khgl.over50')" value="1" />
          <el-option :label="t('jggl.khgl.over100')" value="2" />
          <el-option :label="t('jggl.khgl.over200')" value="3" />
          <el-option :label="t('jggl.khgl.over500')" value="4" />
          <el-option :label="t('jggl.khgl.over1000')" value="5" />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.businessRegistrationNumber')" prop="regNumber">
        <el-input
          v-model="drawerProps.row!.regNumber"
          :placeholder="t('jggl.khgl.pleaseEnterBusinessRegistrationNumber')"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.registeredCapital')" prop="regCapital">
        <el-input
          v-model="drawerProps.row!.regCapital"
          :placeholder="t('jggl.khgl.pleaseEnterRegisteredCapital')"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.email')" prop="email">
        <el-input v-model="drawerProps.row!.email" :placeholder="t('jggl.khgl.pleaseEnterEmail')" clearable></el-input>
      </el-form-item>
      <el-form-item :label="t('jggl.khgl.address')" prop="address">
        <el-input v-model="drawerProps.row!.address" :placeholder="t('jggl.khgl.pleaseEnterAddress')" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">{{ t("common.cancel") }}</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">{{ t("common.confirm") }}</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";
import { genderType } from "@/utils/dict";
import { ElMessage, FormInstance } from "element-plus";
import { User, OrgManager } from "@/api/interface";
import UploadImg from "@/components/Upload/Img.vue";
import UploadImgs from "@/components/Upload/Imgs.vue";
import moreSelectUser from "@/views/tools/moreUserSelect/index.vue";
import { useI18n } from "vue-i18n";
import {
  findITSOPUserPager,
  updateITSOPUser,
  deleteITSOPUser,
  batchDeleteITSOPUser,
  addITSOPUser,
  ITSOPOrganization,
  importITSOPUser,
  exportITSOPUser
} from "@/api/modules/jggl";

const { t } = useI18n();

const rules = reactive({
  orgName: [{ required: true, message: t("jggl.khgl.pleaseEnterCustomerName") }]
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<OrgManager.ResOrgList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}
const dialogTableVisible = ref(false);
//子组件弹窗回调方法
const sendData = (data: [OrgManager.ResOrgList]) => {
  dialogTableVisible.value = false;
  let strName = "";
  let str = "";
  if (data.length > 0) {
    for (let i = 0; i < data.length; i++) {
      if (strName == "") {
        strName = data[i].fullName + ";";
      } else {
        strName = strName + data[i].fullName + ";";
      }

      if (str == "") {
        str = data[i].loginName + ";";
      } else {
        str = str + data[i].loginName + ";";
      }
    }
  }
  drawerProps.value.row!.technicianNameFullName = strName;
  drawerProps.value.row!.technicianNamesStr = str;
};
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      let param = {
        orgName: "",
        technicianNamesStr: "",
        typeNo: 39,
        officePhone: "",
        officeFax: "",
        corporate: "",
        companySize: "",
        regNumber: "",
        regCapital: "",
        email: "",
        address: "",
        orgNo: "",
        companyNo: 1
      };

      if (drawerProps.value.row!.technicianNamesStr != undefined) {
        param.technicianNamesStr = drawerProps.value.row!.technicianNamesStr;
      } else {
        let oldtechnicianNamesStr = "";
        if (drawerProps.value.row!.technicianNames != null && drawerProps.value.row!.technicianNames.length > 0) {
          let tmp = drawerProps.value.row!.technicianNames;
          for (let i = 0; i < tmp.length; i++) {
            oldtechnicianNamesStr = oldtechnicianNamesStr + tmp[i] + ";";
          }
        }
        param.technicianNamesStr = oldtechnicianNamesStr;
      }
      if (drawerProps.value.row!.technicianNameFullName == "") {
        ElMessage.error(t("jggl.khgl.technicianCannotBeEmpty"));
        param.technicianNamesStr = "";
        return;
      }
      param.orgName = drawerProps.value.row!.orgName == undefined ? "" : drawerProps.value.row!.orgName;

      if (drawerProps.value.row!.typeName == "付费用户") {
        param.typeNo = 39;
      } else {
        param.typeNo = 40;
      }

      param.officePhone = drawerProps.value.row!.officePhone == undefined ? "" : drawerProps.value.row!.officePhone;
      param.officeFax = drawerProps.value.row!.officeFax == undefined ? "" : drawerProps.value.row!.officeFax;
      param.corporate = drawerProps.value.row!.corporate == undefined ? "" : drawerProps.value.row!.corporate;
      param.companySize = drawerProps.value.row!.companySize == undefined ? "" : drawerProps.value.row!.companySize;
      param.regNumber = drawerProps.value.row!.regNumber == undefined ? "" : drawerProps.value.row!.regNumber;
      param.regCapital = drawerProps.value.row!.regCapital == undefined ? "" : drawerProps.value.row!.regCapital;
      param.email = drawerProps.value.row!.email == undefined ? "" : drawerProps.value.row!.email;
      param.address = drawerProps.value.row!.address == undefined ? "" : drawerProps.value.row!.address;
      if (`${drawerProps.value.title}` == "新增") {
        param.orgNo = "";
      } else {
        param.orgNo = drawerProps.value.row!.orgNo == undefined ? "" : drawerProps.value.row!.orgNo;
      }
      param.companyNo = 1;

      if (`${drawerProps.value.title}` == "新增") {
        await addITSOPUser(param, "itsopUserDTO").then(res => {
          ElMessage.success({ message: `${t("jggl.khgl.add")}${t("jggl.khgl.customer")}${t("jggl.khgl.success")}` });
        });
        drawerProps.value.getTableList!();
        drawerVisible.value = false;
      } else {
        await updateITSOPUser(param, "itsopUserDTO").then(res => {
          ElMessage.success({ message: `${t("jggl.khgl.edit")}${t("jggl.khgl.customer")}${t("jggl.khgl.success")}` });
        });
        drawerProps.value.getTableList!();
        drawerVisible.value = false;
      }
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>
